<template>
	<view class="add-staff">
		<view class="add-staff-cell-group">
			<view class="add-staff-cell">
				<text>员工ID</text>
				<input type="digit" placeholder="请输入员工ID" v-model="form.user_id"/>
			</view>
			<view class="add-staff-cell">
				<text>提成(%)</text>
				<input type="number" placeholder="1-10" v-model="form.royalty" />
			</view>
			<view class="add-staff-cell">
				<text>人员类型</text>
				<picker :range="roles" range-key="name" :value="roleIndex==4?0:roleIndex" @change="selectRoles" :class="['picker',{'picker-value': roleIndex<4}]">
					{{roleIndex < 4?roles[roleIndex].name:'请选择'}}
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image>
				</picker>
			</view>
			<view class="add-staff-cell" v-if="showPlus">
				<text style="width: 7em;">设置可查看品牌</text>
				<view :class="['setLimit',{active: form.factory_sn}]" @click="showBrand">
					{{form.factory_sn?form.factory_sn:'请选择'}}
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="add-staff-btn"><button type="primary" @click="add">保存</button></view>
		<uni-popup type="bottom" ref="brandPop" class="selectBrandPop">
			<view class="brand-list">
				<view :class="['brand-item',{active: data.selected}]" v-for="(data,index) in FactoryList" :key="index" @click="selectFac(data.factory_sn)">
					<text>工厂编号：{{data.factory_sn}}</text>
					<icon type="success_no_circle" size="20" color="#2073F5" v-if="data.selected"/>
				</view>
			</view>
			<view class="brand-btns">
				<button type="default" @click="cancel">取消</button>
				<button type="primary" @click="confirm">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPlus: false,
				roleIndex: 4,
				roles: [{
					value: 0,
					name: '业务员'
				},{
					value: 1,
					name: '财务'
				},{
					value: 2,
					name: '分销商'
				},{
					value: 3,
					name: '设计师'
				}],
				FactoryList: [],
				form: {
					user_id: '',
					royalty: '',
					type: '',
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					factory_sn: ''
				},
				store_admin_id: ''
			};
		},
		onLoad(options) {
			if(options.user_id){
				this.form.user_id = options.user_id
			}
			if(options.type){
				this.roleIndex = options.type - 1
			}
			if(options.type==5){
				this.roleIndex = 3
			}
			if(this.roleIndex < 0){
				this.roleIndex = 4
			}
			if(options.royalty){
				this.form.royalty = options.royalty
			}
			if(options.store_admin_id){
				this.store_admin_id = options.store_admin_id
			}
			this.getPlusCan()
		},
		methods:{
			// 请求是否有使用限制员工查看品牌
			getPlusCan(){
				this.$api.PlugCan({plug_type: 1}).then(res => {
					if(res.datas.status==1){
						this.showPlus = true
					}else{
						this.showPlus = false
					}
				})
			},
			// 选择角色
			selectRoles(e){
				this.roleIndex = e.detail.value
				switch (Number(e.detail.value)){
					case 0:
						this.form.type = 2
						break;
					case 1:
						this.form.type = 3
						break;
					case 2:
						this.form.type = 4
						break;
					case 3:
						this.form.type = 6
						break;
				}
			},
			// 添加
			add(){
				console.log(this.form.type)
				if(!this.form.user_id){
					uni.showToast({
						icon: 'none',
						title: '请输入员工ID',
						duration: 1500
					})
					return false
				}else if(!this.form.royalty){
					uni.showToast({
						icon: 'none',
						title: '请输入提成比例',
						duration: 1500
					})
					return false
				}else if(!this.form.type){
					uni.showToast({
						icon: 'none',
						title: '请选择人员类型',
						duration: 1500
					})
					return false
				}
				if(this.store_admin_id){
					this.form.store_admin_id = this.store_admin_id
				}
				this.$api.StaffAdd(this.form).then(res => {
					uni.showToast({
						icon: 'none',
						title: this.store_admin_id?'修改成功':'添加成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack()
					},1500)
				})
			},
			// 设置可查看品牌弹窗
			showBrand(){
				this.$api.StoreFactory({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.FactoryList = res.datas
					this.FactoryList.forEach(item => {
						this.$set(item,'selected',false)
					})
					this.$refs.brandPop.open()
				})
			},
			selectFac(name){
				this.FactoryList.forEach(item => {
					if(name===item.factory_sn){
						item.selected = !item.selected
					}
				})
			},
			cancel(){
				this.$refs.brandPop.close()
			},
			confirm(){
				let names = []
				this.FactoryList.forEach(item => {
					if(item.selected){
						names.push(item.factory_sn)
					}
				})
				this.$refs.brandPop.close()
				this.form.factory_sn = names.join(',')
			}
		}
	}
</script>

<style lang="scss">
	.add-staff{
		padding-top: 20rpx;
		.add-staff-cell{
			display: flex;
			background-color: #FFF;
			padding: 30rpx 20rpx;
			text{
				width: 5em;
			}
			input{
				flex: 1;
				text-align: right;
				height: 78rpx;
				line-height: 78rpx;
				background-color: #F3F3F3;
				padding: 0 20rpx;
			}
			.picker{
				flex: 1;
				color: #999;
				text-align: right;
				image{
					width: 12rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
				&.picker-value{
					color: #333;
				}
			}
			.setLimit{
				color: #999;
				flex: 1;
				text-align: right;
				&.active{
					color: #333;
				}
				image{
					width: 12rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
		.add-staff-btn{
			padding: 75rpx;
			button{
				background-color: #2073F5;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
			}
		}
		.brand-list{
			background-color: #FFF;
			padding: 30rpx 30rpx 0;
			.brand-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 1px #EEE;
				padding: 30rpx 0;
				&:first-child{
					padding-top: 0;
				}
				&.active{
					color: #2073F5;
				}
			}
		}
		.brand-btns{
			background-color: #FFF;
			display: flex;
			padding: 30rpx;
			button{
				flex: 1;
				border-radius: 40rpx;
				font-size: 26rpx;
				&::after{
					display: none;
				}
				&:first-child{
					color: #666;
				}
				&:last-child{
					background-color: #2073F5;
					margin-left: 30rpx;
				}
			}
		}
		.selectBrandPop .uni-transition{
			max-height: 90%;
		}
	}
</style>
